<!DOCTYPE html>
<html lang="en"  xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
  <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>	
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
  <style type="text/css">
	#components-layout-demo-basic {
	  text-align: center;
	  position:relative;
	}
	#components-layout-demo-basic .ant-layout-header{
		background-color:black;
		height:100px;
		
	}
	#components-layout-demo-basic .ant-layout-sider {
	  background-color:#FFF;
	  color: black;
	}
	#components-layout-demo-basic .ant-layout-content {
	  
	  color: #fff;
	  min-height: 150px;
	}
	#components-layout-demo-basic > .ant-layout {
	  margin-bottom: 0;
	}
	#components-layout-demo-basic > .ant-layout:last-child {
	  margin: 0;
	}
  </style>
</head>
<body>
 <div id="app">
	
	<div id="components-layout-demo-basic">
		<a-layout>
		  <a-layout-header>
			<div id="outnum1" style="float:left;margin-left:200px;margin-top:20px;">
				<a-statistic style="color:#fff;" title="预警人数" :value="warn_num" />
			</div>
			<div id="outnum2" style="float:left;margin-left:200px;margin-top:20px;">
				<a-statistic style="color:#fff;" title="高危人数" :value="warn_num1" />
			</div>
		  </a-layout-header>
		  <a-layout>
			
			<a-layout-content>
			  <div>
				<div style="float:right;margin-top:10px;margin-right:20px;"><a @click="getPdf">导出pdf</a></div>
				<div style="float:right;margin-top:10px;margin-right:20px;"><a @click="defa">刷新</a></div>
				<br/>
				<div id="tab" style="width:800px;;background-color:#FFF;margin:50px auto;">
					<h2>用户健康信息</h2>
					<a-table :data-source="data" :columns="column" :pagination="{ pageSize: 10 }">
						<a-popconfirm
							title="确定删除?"
							ok-text="Yes"
							cancel-text="No"
							@confirm="deletes(record.resId)"
							@cancel="cancel"
						  >
							<a href="#">delete</a>
						</a-popconfirm>
						<div
							slot="filterDropdown"
							slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
							style="padding: 8px"
						>
							<a-input
							v-ant-ref="c => (searchInput = c)"
							:placeholder="`Search ${column.dataIndex}`"
							:value="selectedKeys[0]"
							style="width: 188px; margin-bottom: 8px; display: block;"
							@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
							@pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
							 />
						</div>
						<a-icon
							slot="filterIcon"
							slot-scope="filtered"
							type="search"
							:style="{ color: filtered ? '#108ee9' : undefined }"
						/>
				
					</a-table>
				</div>
			  </div>
			  
			</a-layout-content>
		  </a-layout>
		</a-layout>
	</div>
  </div>
<script>
	var app = new Vue({
        // e1: '#app',
        //注意这时l来着l
        el: '#app',
		data(){
			return{
				warn_num:0,
				warn_num1:0,
				data:[],
				searchText: '',
				searchInput: null,
				searchedColumn: '',
				column:[
					{
					  title: '姓名',
					  dataIndex: 'name',
					  key: 'name',
					  scopedSlots: {
						filterDropdown: 'filterDropdown',
						filterIcon: 'filterIcon',
						customRender: 'customRender',
					  },
					  onFilter: (value, record) =>
						record.name
						  .toString()
						  .toLowerCase()
						  .includes(value.toLowerCase()),
					  onFilterDropdownVisibleChange: visible => {
						if (visible) {
						  setTimeout(() => {
							this.searchInput.focus();
						  }, 0);
						}
					  },
					  sortDirections: ['descend', 'ascend'],
					  sorter: (a, b) => a.name.length - b.name.length,
					},
					{
					  title: '身份证号',
					  dataIndex: 'identity',
					  key: 'identity',
					  scopedSlots: {
						filterDropdown: 'filterDropdown',
						filterIcon: 'filterIcon',
						customRender: 'customRender',
					  },
					  onFilter: (value, record) =>
						record.identity
						  .toString()
						  .toLowerCase()
						  .includes(value.toLowerCase()),
					  onFilterDropdownVisibleChange: visible => {
						if (visible) {
						  setTimeout(() => {
							this.searchInput.focus();
						  }, 0);
						}
					  },
					},
					{
					  title: '房号',
					  dataIndex: 'house_id',
					  key: 'house_id',
					  scopedSlots: {
						filterDropdown: 'filterDropdown',
						filterIcon: 'filterIcon',
						customRender: 'customRender',
					  },
					  onFilter: (value, record) =>
						record.house_id
						  .toString()
						  .toLowerCase()
						  .includes(value.toLowerCase()),
					  onFilterDropdownVisibleChange: visible => {
						if (visible) {
						  setTimeout(() => {
							this.searchInput.focus();
						  }, 0);
						}
					  },
					},
					{
					  title: '出入次数',
					  dataIndex: 'entity_times',
					  key: 'entity_times',
					},
					{
					  title: '连续异常温度',
					  dataIndex: 'warn',
					  key: 'warn',
					},
					{
					  title: '预警',
					  dataIndex: 'warns',
					  key: 'warns',
					  filters: [
						{ text: '健康', value: '健康' },
						{ text: '预警', value: '预警' },
						{ text: '高危', value: '高危' },
					  ],
					  onFilter: (value, record) => record.warns.indexOf(value) === 0,
					},
					{
					  title: 'Action',
					  dataIndex: 'action',
					  key: 'action',
					  scopedSlots: {
						customRender: 'action',
					  },
					}
				],
				
			};
		},
		mounted(){
			this.warn();
			this.defa();
		},
		methods:{
			deletes(ids){
				axios.get("http://47.94.215.148:8080/admin/deleteAccount?id="+ids,{
                        withCredentials: true,
                    }).then((resp)=>{
					console.log(resp.data);
					if(resp.data.status==1){
						this.$message.success("删除成功！！");
						this.getData();
					}
					else{
						this.$message.error("删除失败~！！！");
					}
				});
			},
			warn(){
				axios.get("http://47.94.215.148:8080/admin/getWarn",{
							withCredentials: true,
					}).then((res)=>{
					this.warn_num=res.data.warn;
					this.warn_num1=res.data.serwarn;
					});
			},
			defa(){
				$("#outnum1").show();
				$("#outnum2").show();
				this.data=[];
				//this.datas=this.dataes;
				axios.get("http://47.94.215.148:8080/admin/getResAccountInfo",{
                        withCredentials: true,
                    }).then((res)=>{
						console.log(res.data);
						this.data=res.data.message;
						if(res.data.message.warn>=5){
							this.data.warns="高危";
						}
						else{
							if(res.data.message.warn>=1){
								this.data.warns="预警";
							}
							else{
								this.data.warns="正常";
							}
						}
						
					});
				
			},
			getPdf(){
			  var target = document.getElementById("tab");
			  target.style.background = "#FFFFFF";

			  html2canvas(target, {
				onrendered:function(canvas) {
					var contentWidth = canvas.width;
					var contentHeight = canvas.height;

				//一页pdf显示html页面生成的canvas高度;
				var pageHeight = contentWidth / 592.28 * 841.89;
				//未生成pdf的html页面高度
				var leftHeight = contentHeight;
				//页面偏移
				var position = 0;
				//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
				var imgWidth = 595.28;
				var imgHeight = 592.28/contentWidth * contentHeight;

				var pageData = canvas.toDataURL('image/jpeg', 1.0);

				var pdf = new jsPDF('', 'pt', 'a4');

				//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
				//当内容未超过pdf一页显示的范围，无需分页
				if (leftHeight < pageHeight) {
				pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
				} else {
					while(leftHeight > 0) {
						pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
						leftHeight -= pageHeight;
						position -= 841.89;
						//避免添加空白页
						if(leftHeight > 0) {
						  pdf.addPage();
						}
					}
				}

				pdf.save("住户体温登记表.pdf");
			}
		  })
			},
			handleSearch(selectedKeys, confirm, dataIndex) {
			  confirm();
			  this.searchText = selectedKeys[0];
			  this.searchedColumn = dataIndex;
			},
			getTime(date){ 
				return date.substring(0,10);
			},
			getMonths(date){
				return date.substring(5,7)
			},
			getDate(dateStr,separator){
				if(!separator){
					separator="-";
				}
				var dateArr = dateStr.split(separator);
				var year = parseInt(dateArr[0]);
				var month;
				 //处理月份为04这样的情况                         
				if(dateArr[1].indexOf("0") == 0){
					month = parseInt(dateArr[1].substring(1));
				}else{
					month = parseInt(dateArr[1]);
				}
				var day = parseInt(dateArr[2]);
				var date = new Date(year,month -1,day);
				return date;
			},
		}
	})
</script>
</body>
</html>